<template>
  <div>
    <crudTable :option="option" 
               :data="data" 
               :page="page"
               :searchOptions="searchOptions"
               @onLoad="onLoad"
               @handleCurrentChange="handleCurrentChange"
               @handleSizeChange="handleSizeChange"
               @getQuery="getQuery">
      <template v-slot:cpagination>
        <div>费用合计:{{allCost}}元</div>
      </template>
    </crudTable>
  </div>
</template>

<script>
import crudTable from '@/components/CrudTable'
import { settlementDetails } from '@/api/settlementDetails'
export default {
  components:{
    crudTable,//增删改查表
  },
  data(){
    return{
      allCost:0,
      query:{},
      //搜索框配置项
      searchOptions:{
        clearBtn:false,
        items:[
          {
            type:'times',
            key:['startTime','endTime'],
            label:'结算时间'
          },
          {
            type:'select',
            key:'payTypeCode',
            label:'结算方式',
            enumKey:'pay_type'
          },
        ]
      },
      //表格数据
      data: [],
      //表格配置选项
      option:{
        isDefaultQuery:true,//是否有默认的查询条件
        isSearch:false,
        isPage:true,
        excelBtn:true,//是否展示Excel按钮
        excelUrl:'/api/CostOfTheDead/settlement—details-export-excel',//Excel的下载Url
        excelName:"结算方式_",//excel的文件名
        height:580,//是否设置高度（超出会显示滚动条）
        isIndex:true,//是否需要索引项
        //表格项配置
        items:[
          {
            key:'businessCode',
            label:'业务编码',
            align:'center',
          },
          {
            key:'deadName',
            label:'逝者姓名',
            align:'center',
          },
          {
            key:'deadGender',
            label:'性别',
            align:'center',
            // dicVal:'sex'
          },
          {
            key:'deadAge',
            label:'年龄',
            align:'center',
          },
          {
            key:'certificateNo',
            label:'证件号',
            align:'center',
          },
          {
            key:'householdRegistrationPlace',
            label:'户籍地',
            align:'center',
          },
          {
            key:'agentName',
            label:'家属/承办人姓名',
            align:'center',
          },
          {
            key:'mobilePhone',
            label:'联系电话',
            align:'center',
          },
          {
            key:'realityCharge',
            label:'实收',
            align:'center',
          },
          {
            key:'payType',
            label:'结算方式',
            align:'center',
          }
        ]
      },
      //分页数据
      page:{
        pageSize: 20,//默认页码大小
        total: 0,//总数
        currentPage: 1//当前页
      },
    }
  },
  watch:{
    'query.asOutsideDriver':function(n){
      this.searchOptions.items[2].dicData=[]
      driverType({as0utsideDriver:n}).then(res=>{
        let tmpArr=res.data
        tmpArr.map(el=>{
          this.searchOptions.items[2].dicData.push({desc:el.fullName,val:el.fullName})
        })
      })
    },
    'data':{
      handler(n){
        if(n.length){
          this.allCost=n[0].totalCost
        }else{
          this.allCost=0
        }
      },
      deep:true
    },
  },
  methods:{
    //获取参数
    getQuery(query){
      this.query=query
    },
    //页面加载事件
    onLoad({page,query}){
      let params={
        ...page,
        ...query
      }
      settlementDetails(params).then(res=>{
        this.data=res.data.list
        this.page=res.data.pager
      })
    },
    // 分页组件事件开始
    // 当前页改变事件
    handleCurrentChange({currentPage}){
      this.page.currentPage=currentPage
    },
    //每页展示数量改变触发
    handleSizeChange({pageSize}) {
      this.page.pageSize=pageSize
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
